import React, { useEffect, useState } from "react";
import { Button, Upload } from "antd";
import axios from "axios";
import './index.css'
const Index: React.FC = () => {
  const [img, setImg] = useState<string[]>([]);
  useEffect(() => {
    axios.get("/api/upload/list").then((resp) => {
      setImg(resp.data.data.objects.map((v: any) => v.url));
    });
  }, []);
  const onChange = (e: any) => {
    if (e.file.response) {
      const { data } = e.file.response;
      setImg((img) => [...img, data.url]);
    }
  };
  return (
    <div>
      <Upload.Dragger action="/api/upload/oss" onChange={(e) => onChange(e)}>
        <Button className="sc">点我上传</Button>
      </Upload.Dragger>
      <div>
        {img.map((v, i) => {
          return (
            <img
              key={i}
              src={v}
              height={100}
              width={100}
              style={{ margin: 10 }}
            />
          );
        })}
      </div>
    </div>
  );
};
export default Index;
